﻿<div class="demo-description">
    <h2>
        <DemoNavLink Link="Menu#MobileVertical" />Mobile Vertical Menu
    </h2>
    <p>This demo demonstrates how to create a vertical menu for mobile devices. The <a class="helplink" target="_blank" href=" https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxMenu.DisplayMode" >DisplayMode</a> property is set to <strong>Mobile</strong>, the <a class="helplink" target="_blank" href=" https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxMenu.Orientation" >Orientation</a> property is set to <strong>Vertical</strong>.</p>
</div>

<div class="card demo-card d-inline-block demo-card-sm menu-box">
    <div class="card-body p-0">
        <DxMenu Orientation="Orientation.Vertical"
                DisplayMode="MenuDisplayMode.Mobile">
            <Items>
                <DxMenuItem Text="Home" IconCssClass="menu-icon-home menu-icon">
                    <Items>
                        <DxMenuItem Text="News">
                            <Items>
                                <DxMenuItem Text="Explore our newest features" />
                                <DxMenuItem Text="Website news" />
                            </Items>
                        </DxMenuItem>
                        <DxMenuItem Text="Our Mission" />
                        <DxMenuItem Text="Our Customers" />
                    </Items>
                </DxMenuItem>
                <DxMenuItem Text="Components" IconCssClass="menu-icon-products menu-icon">
                    <Items>
                        <DxMenuItem Text="Blazor" />
                        <DxMenuItem Text="ASP.NET MVC" />
                        <DxMenuItem Text="ASP.NET Web Forms" />
                        <DxMenuItem Text="ASP.NET Core" />
                        <DxMenuItem Text="Bootstrap Web Forms" />
                    </Items>
                </DxMenuItem>
                <DxMenuItem Text="Support" IconCssClass="menu-icon-support menu-icon">
                    <Items>
                        <DxMenuItem Text="Getting Started" />
                        <DxMenuItem Text="Documentation" />
                        <DxMenuItem Text="Support Center" />
                        <DxMenuItem Text="Code Examples" />
                        <DxMenuItem Text="Blogs" />
                    </Items>
                </DxMenuItem>
                <DxMenuItem Text="Contacts" IconCssClass="menu-icon-contacts menu-icon" />
                <DxMenuItem Text="About" IconCssClass="menu-icon-about menu-icon" />
            </Items>
        </DxMenu>
    </div>
</div>
<CodeSnippet_Menu_Mobile_Vertical />
